<template>
  <div class="historyPage">
    <p
      class="historyPage__leftBlock"
      :style="type === 'Refill' ? 'color: #388A1B' : 'color: #8A221B'"
    >
      {{ type === "Refill" ? "+" : "-" }} {{ sum }} UDNTzcyczt
    </p>
    <p class="historyPage__rightBlock">{{ normalisationViewData }}</p>
  </div>
</template>

<script>
export default {
  name: "HistoryItem",
  props: {
    type: String,
    sum: String,
    date: String,
  },
  computed: {
    normalisationViewData: function () {
      return new Date(this.date).toLocaleDateString("ru-RU", {
        year: "numeric",
        month: "long",
        day: "numeric",
      });
    },
  },
};
</script>

<style scoped>
.historyPage {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.historyPage__leftBlock {
  font-size: 15px;
  font-weight: 800;
  font-family: "Roboto", sans-serif;
  color: var(--tg-theme-text-color);
}

.historyPage__rightBlock {
  font-size: 15px;
  font-weight: 800;
  font-family: "Roboto", sans-serif;
  color: var(--tg-theme-text-color);
}
</style>
